/* stylelint-disable scss/operator-no-newline-after */

@property --vp-collapsed-lines-bg {
  inherits: false;
  initial-value: #fff;
  syntax: '<color>';
}

@keyframes code-collapsed-lines {
  0% {
    opacity: 0.3;
    transform: translateY(-2px) rotate(var(--vp-collapsed-lines-rotate));
  }

  100% {
    opacity: 1;
    transform: translateY(2px) rotate(var(--vp-collapsed-lines-rotate));
  }
}

// collapsed lines
div[class*='language-'].has-collapsed-lines {
  .collapsed-lines {
    --vp-collapsed-lines-bg: var(--code-c-bg);
    --vp-collapsed-lines-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='m18 12l-6 6l-6-6m12-6l-6 6l-6-6'/%3E%3C/svg%3E");
    --vp-collapsed-lines-rotate: 0deg;

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 28px;

    background: linear-gradient(
      to bottom,
      transparent 0%,
      var(--vp-collapsed-lines-bg) 55%,
      var(--vp-collapsed-lines-bg) 100%
    );

    cursor: pointer;

    transition: --vp-collapsed-lines-bg var(--vp-t-color);

    &:hover {
      --vp-collapsed-lines-bg: var(--code-c-highlight-bg);
    }

    &::before {
      content: '';

      display: inline-block;

      width: 24px;
      height: 24px;

      background-color: var(--code-c-text);

      mask-image: var(--vp-collapsed-lines-icon);
      mask-position: 50%;
      mask-size: 20px;
      mask-repeat: no-repeat;
      pointer-events: none;

      animation: code-collapsed-lines 1.2s infinite alternate-reverse
        ease-in-out;
    }
  }

  &[data-highlighter='shiki'] .collapsed-lines {
    --vp-collapsed-lines-bg: var(--code-c-bg, var(--shiki-light-bg));

    /* stylelint-disable-next-line selector-max-attribute */
    [data-theme='dark'] & {
      --vp-collapsed-lines-bg: var(--code-c-bg, var(--shiki-dark-bg));
    }
  }

  &.collapsed {
    overflow-y: hidden;
    height: calc(
      var(--vp-collapsed-lines) * var(--code-line-height) *
        var(--code-font-size) + var(--code-padding-y) + 28px
    );
  }

  &:not(.collapsed) {
    code {
      padding-bottom: max(var(--code-padding-y), 28px);
    }

    .collapsed-lines {
      --vp-collapsed-lines-rotate: 180deg;
    }
  }
}
